<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>青橙</title>
    <meta name="description" content="青橙">
    <meta name="keywords" content="青橙">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/theme-chalk.css">
    <link rel="stylesheet" href="css/login_style.css">
    <style type="text/css">
        .el-main {
            position: absolute;
            top: 83px;
            bottom: 0px;
            left: 220px;
            right: 10px;
            padding: 0;
        }
    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-header class="main-header" style="height:60px;">
            <!-- 导航 -->
            <nav class="navbar navbar-static-top" :class=''>
                <!-- Logo -->
                <a href="all-admin-index.html" class="logo" style="text-align:center">
                    <span class="logo-lg" v-show='!isCollapse'><img src="img/logo.png"></span>
                </a>
                <div class="right-menu">
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img src="img/user2-160x160.jpg" class="user-avatar">
                            {{loginName}}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <span @click="formVisible=true">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="display:block;" @click="exit()">退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 导航 -->
                <div class="topbar-title">
                    <el-row>
                        <el-col :span="24">
                            <el-menu class="el-menu-demo headNav" mode="horizontal"
                                     :default-active="defaultActiveIndex">
                                <el-menu-item :index="item.path" v-for="item in menuList" @click="handleSelect(item)"><i
                                        class="iconNav" :class="item.icon"></i>{{item.title}}
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
                <!-- end -->
            </nav>
            <!-- end -->
        </el-header>
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside :width="tabWidth+'px'" id="asieHeight">
                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen"
                         @close="handleClose" :collapse="isCollapse" :default-openeds="openeds">
                    <sidebar-item :key="data.path" v-for="data in data.children" :item="data"/>
                </el-menu>
            </el-aside>
            <!-- end -->
            <!-- iframe导入对应的模块内容 -->
            <el-container>
                <iframe name="right" id="iframepage" :src="linkUrl" style="width:100%;magrin:0 auto" marginwidth="0"
                        marginheight="0" height="100%" frameborder="0" ranat="server"></iframe>
                <!-- <iframe  name="mainFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" src="commodity-add.html" style="width:100%;magrin:0 auto"></iframe> -->
            </el-container>
            <!--  -->
        </el-container>
    </el-container>
    <!-- 底部 -->
    <el-footer>
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0
            </div>
            <strong>Copyright &copy; 2016-2019 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.
        </footer>
    </el-footer>
    <!--弹出窗口-->
    <el-dialog title="编辑" :visible.sync="formVisible">
        <el-form label-width="80px">
            <el-form-item label="原密码">
                <el-input v-model="pojo.oldPassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
                <el-input v-model="pojo.newPassword"></el-input>
            </el-form-item>

            <!-- 图片上传代码 如页面有图片上传功能放开注释 ****
            <el-form-item label="图片">
                <el-upload
                        class="avatar-uploader"
                        action="/upload/native.do"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            -->

            <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
                <el-button @click="formVisible = false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- end -->
</div>
</body>
<!-- 引入组件库 -->
<script src="/js/axios.js"></script>
<script src="js/vue.js"></script><!-- vue -->
<script src="js/elementui.js"></script><!-- element-ui -->
<script src="js/menu.js"></script><!-- 导航菜单 -->
<script>
    // 左侧菜单组件
    Vue.component('sidebar-item', {
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        template: `
        <div v-if="item.children">
            <template v-if="item.children.length == 0">
                <el-menu-item :index="item.path">
                <i class="icon" :class="item.icon"></i>
                <a :href="item.linkUrl" target="right">{{item.title}}</a>
                </el-menu-item>
            </template>
            <template v-else :index="item.path">
                <div slot="title" class="el-submenu__title">
                    <i class="icon" :class="item.icon"></i>
                    {{item.title}}
                </div>

                <template v-for="child in item.children">
                    <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :item="child"
                    :key="child.path"/>
                    <el-menu-item v-else :key="child.path" :index="child.path" style='padding-left:58px'>
                    <a :href="child.linkUrl" target="right">{{child.title}}</a>
                    </el-menu-item>
                </template>
            </template>          
        </div>`
    })
    new Vue({
        el: '#app',
        // router,
        data() {
            return {
                visible: false,
                isCollapse: false,
                tabWidth: 180,
                test1: 1,
                intelval: null,
                winfo: 'winfo',
                data: [],
                menuList: [],
                defaultActiveIndex: "2",
                defaultActive: '2-1-2',
                openeds: [],
                linkUrl: 'all-item-list.html',
                loginName: "",
                formVisible: false,
                pojo: {}
            }
        },
        created() {
            let linkUrl = localStorage.getItem('linkUrl')
            let activeIndex = localStorage.getItem('activeIndex')
            if (linkUrl !== 'undefined') {
                this.linkUrl = linkUrl
                this.defaultActiveIndex = activeIndex
            }

            // axios.get(`/menu/findMenusByLoginName.do`).then(response => {
            //
            //     // 获取导航数据
            //     this.menuList = response.data
            //     // 导航默认选择
            //     this.data = response.data[1]
            //     var data = []
            //     for (var i = 0; i < this.data.children.length; i++) {
            //         data.push(this.data.children[i].path)
            //     }
            //     this.openeds = data
            // });
            axios.get('/menu/findMenusByLoginName.do').then( response=>{
                // 获取导航数据
                this.menuList=response.data
                // 导航默认选择
                this.data=response.data[0]
                var data=[]
                for(var i=0;i<this.data.children.length;i++){
                    data.push(this.data.children[i].path)
                }
                this.openeds=data
            } )

            axios.get(`/login/name.do`).then(response => {
                this.loginName = response.data.name;
            })
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 选择顶部导航菜单，联动左侧菜单
            handleSelect(key) {
                localStorage.setItem('linkUrl', key.linkUrl)
                localStorage.setItem('activeIndex', key.path)
                var data = []
                for (var i = 0; i < key.children.length; i++) {
                    data.push(key.children[i].path)
                    this.defaultActive = key.children[0].children[0].path
                    this.linkUrl = key.children[0].linkUrl

                }
                this.openeds = data
                this.data = key
            },
            //退出的方法
            exit() {
                axios.post(`/logout`).then(response => {
                    location.href = "login.html"
                })
            },
            save() {
                axios.post(`/admin/modifyPassword.do`,this.pojo).then(response => {
                    alert(response.data.message)
                })
            }
        }
    })

    window.onload = windowHeight; //页面载入完毕执行函数
    function windowHeight() {
        var wd = 220;
        var iframepage = document.getElementById("iframepage")
        var asieHeight = document.getElementById("asieHeight")
        iframepage.style.width = document.documentElement.clientWidth - wd + 'px'
        asieHeight.style.height = document.documentElement.clientHeight + 'px'
    }
</script>
</html>
